<template>
    <div class="IndexTabsPage">
        <van-tabs
                v-model="active"
                swipeable lazy-render sticky line-height="2"
                @click="handelChange"
                :background="tabsTheme.background"
                :color="tabsTheme.color"
                :titleInactiveColor="tabsTheme.titleInactiveColor"
                :titleActiveColor="tabsTheme.titleActiveColor"

        >
            <van-tab
                    v-for="(item,index) in tabList"
                    :key="index"
                    :title='item.opt_name'
                    v-if="index<30"
                    :name="item.opt_id"
            >
                <Recommd v-if="index===0"/>
                <cate-show-page :opt_id="opt_id" :keyword="keyword" v-else/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import CateShowPage from "../components/CateShowPage";
    import IndexGoodsList from "../components/IndexGoodsList";
    import Recommd from "../components/Recommd";
    import Bus from "../Bus/index"

    export default {
        name: "IndexTabsPage",
        data() {
            return {
                active: "",
                tabsTheme: {
                    background: 'url(https://commimg.pddpic.com/oms_img_ng/2020-12-09/6715988b-f3e0-4996-b8a5-944b303788f4.jpeg) no-repeat center bottom/100% auto',
                    color: 'yellow',
                    titleInactiveColor: "white",
                    titleActiveColor: "yellow"
                },
                tabList: [],
                opt_id: 0,
                keyword:"",
            }
        },
        components: {
            Recommd,
            CateShowPage,
            IndexGoodsList,
        },
        created() {
            this.getCategoryTaglist()
            const {act}=this.$route.query
            this.active=act
        },
        methods: {
            handelChange(name,title){
                console.log(name,title)
                this.opt_id=name
                this.keyword=title
                console.log(this.active)
                Bus.$emit("fn",this.active)
            },
            async getCategoryTaglist() {
                const result =await this.axios.post('/categoryTagList',{
                    opt_id:0
                })

                result.data.unshift({
                    opt_id:0,
                    opt_name:"推荐"
                })
                this.tabList=result.data
                // console.log(result)

            }
        }
    }
</script>

<style scoped>

</style>